<template>
    <div class="container">
        <TopSearch></TopSearch>
        <GoodsShowTable :searchBy="searchBy"></GoodsShowTable>
    </div>
  
</template>

<script>
import TopSearch from "../globalComponents/TopSearch"
import GoodsShowTable  from "./GoodsShowTable"

export default {

    components:{
        TopSearch,
        GoodsShowTable
    },
    computed:{
        searchBy(){
            return {
                name:'loadGoodsShowData',
                contents:{
                    q:this.$route.params.q
                }
            }
        }
    },
    mounted(){
        document.title=this.$route.params.q
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
        // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
        // console.log(to);
        document.title=to.params.q
        let contents={
            q:to.params.q
            }
        this.$store.dispatch("loadGoodsShowData",contents);
        next();
    },
    // beforeRouteLeave (to, from, next) {
    //     //清零搜索信息($router.go(-1)时会再次请求数据)
    //     this.$store.commit("setGoodsTypes",[]);
    //     this.$store.commit("setGoodsList",[]);
    //     next();
    // }
    
}
</script>

<style lang="less">

</style>
